<template>
  <el-drawer
    v-loading="infoLoading"
    :title="info.title"
    :visible.sync="dVisible"
    size="70%"
    :open="open"
    :before-close="handleClose"
  >
    <el-card style="margin: 0 20px 0 20px">
      <el-row>
        <el-col :span="2">
          <svg-icon name="international" style="font-size: 3rem" />
        </el-col>
        <el-col :span="22">
          <div class="head-item">
            {{ $t('dataSearch.website') }}: {{ info.domain }}
          </div>
          <div class="head-item">
            {{ $t('common.source') }}: {{ $t('route.dataSearch') }}
          </div>
          <div v-if="info.details && info.details.phones" class="head-item">
            {{ $t('dataSearch.telephone') }}:
            <span
              v-for="(phone, index) in info.details.phones.split(',')"
              :key="index"
              style="margin-right: 10px"
            >
              <template v-if="index < 5">
                <el-link
                  icon="el-icon-mobile-phone"
                  @click="handleClipboard(phone, $event)"
                  >{{ phone }}</el-link
                >
              </template>
            </span>
          </div>
          <div
            v-if="info.details && info.details.company_email"
            class="head-item"
          >
            {{ $t('common.email') }}:
            <span
              v-for="(email, index) in info.details.company_email.split(',')"
              :key="index"
              style="margin-right: 10px"
            >
              <template v-if="index < 5">
                <el-link
                  icon="el-icon-message"
                  @click="handleClipboard(email, $event)"
                  >{{ email }}</el-link
                >
              </template>
            </span>
          </div>
          <div v-if="info.details" class="social-account">
            {{ $t('dataSearch.socialAccount') }}:
            <span v-if="info.details.facebook_url">
              <svg-icon name="facebook" style="font-size: 1.3rem" original />
              <el-link
                icon="facebook"
                target="_blank"
                :href="info.details.facebook_url"
                v-html="info.details.facebook_username"
              ></el-link>
            </span>
            <span v-if="info.details.twitter_url">
              <svg-icon name="twitter" style="font-size: 1.3rem" original />
              <el-link target="_blank" :href="info.details.twitter_url">{{
                info.details.twitter_username
              }}</el-link>
            </span>
            <span v-if="info.details.google_plus_url">
              <svg-icon name="google-plus" style="font-size: 1.3rem" original />
              <el-link target="_blank" :href="info.details.google_plus_url">{{
                info.details.google_plus_username
              }}</el-link>
            </span>
            <span v-if="info.details.youtube_url">
              <svg-icon name="youtube" style="font-size: 1.3rem" original />
              <el-link target="_blank" :href="info.details.youtube_url">{{
                info.details.youtube_username
              }}</el-link>
            </span>
            <span v-if="info.details.instagram_url">
              <svg-icon
                name="instagram"
                style="font-size: 1.3rem"
                color="#f54832 #fff"
              />
              <el-link target="_blank" :href="info.details.instagram_url">{{
                info.details.instagram_username
              }}</el-link>
            </span>
            <span v-if="info.details.linkedin_url">
              <svg-icon name="linkedin" style="font-size: 1.3rem" original />
              <el-link target="_blank" :href="info.details.linkedin_url">{{
                info.details.linkedin_username
              }}</el-link>
            </span>
            <span v-if="info.details.github_url">
              <svg-icon name="github" style="font-size: 1.3rem" original />
              <el-link target="_blank" :href="info.details.github_url">{{
                info.details.github_username
              }}</el-link>
            </span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-tabs v-model="activeName" style="padding: 20px">
      <el-tab-pane :label="$t('dataSearch.contactPerson')" name="contact">
        <el-row>
          <el-col>
            <el-button>{{ $t('common.disableEmail') }}</el-button>
          </el-col>
        </el-row>
        <el-table :data="employees" height="60vh">
          <el-table-column type="selection" align="center" />
          <el-table-column align="center" :label="$t('common.id')" width="50">
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('common.name')"
            min-width="200"
          >
            <template slot-scope="{ row }">
              {{ row.first_name }} {{ row.last_name }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('common.companyName')"
            min-width="150"
          >
            <template slot-scope="{ row }">
              {{ row.company_name }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('common.office')"
            prop="job_title"
            min-width="200"
          />
          <el-table-column
            :label="$t('common.email')"
            prop="business_email"
            min-width="200"
          >
            <template slot-scope="{ row }">
              <div
                @click="handleClipboard(row.business_email, $event)"
                style="cursor: pointer"
              >
                <svg-icon name="clipboard" />
                {{ row.business_email }}
              </div>
              <div
                v-if="row.personal_email"
                @click="handleClipboard(row.personal_email, $event)"
                style="cursor: pointer"
              >
                <svg-icon name="clipboard" />
                {{ row.personal_email }}
              </div>
            </template>
          </el-table-column>
          <!--          <el-table-column align="center" label="更新时间" prop="updatedAt" min-width="150" />-->
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<style scoped>
.el-input::v-deep .el-input-group__prepend {
  padding: 0;
  width: 200px;
  border: unset;
}

.el-cascader::v-deep .e-input {
  margin-top: -1px;
}

/* .el-input::v-deep .el-input-group__prepend >div.el-cascader.el-cascader--medium.el-cascader >div.el-input.el-input--medium.el-input--suffix > .el-input__inner{ */
/* border-right: unset; */
/* } */
.head-item {
  padding: 5px 0 5px 0;
}

.social-account span {
  margin-right: 10px;
}
</style>
<script lang="ts">
import { getAction, getLongTimeAction } from '@/api/common'
import { handleClipboard } from '@/utils/clipboard'

export default {
  name: 'Details',
  props: {
    show: { type: Boolean, default: false, required: true },
    id: { type: Number, default: 0, required: true },
  },
  watch: {
    show(val: boolean) {
      this.dVisible = val
      if (val) {
        this.open()
      }
    },
  },
  data() {
    return {
      handleClipboard,
      nation: '',
      dVisible: false,
      infoLoading: false,
      keywords: '',
      info: {},
      activeName: 'contact',
      employees: [],
    }
  },
  methods: {
    destroy() {
      this.handleClose()
    },
    open() {
      this.info = {}
      this.employees = []
      this.fetchData()
    },
    fetchData() {
      this.infoLoading = true
      getLongTimeAction({}, 'globalSearch/' + this.id)
        .then((res) => {
          this.info = res.data.info
          this.employees = this.info.employees
        })
        .finally(() => {
          this.infoLoading = false
        })
    },
    handleClose() {
      this.$emit('update:show', false)
    },
  },
}
</script>
